import cn from "classnames";
import type { FunctionalComponent as FC, StyleValue } from "vue";
import styles from "./List.module.css";

type ListProps = {
  style?: StyleValue;
  class?: any;
};

type Slots = {
  default: () => unknown;
};

const List: FC<ListProps, [], Slots> = (p: ListProps, { slots }) => {
  return (
    <ul class={cn(styles.list, p.class)} style={p.style}>
      {slots.default?.()}
    </ul>
  );
};

export default List;

export const ListItem: FC<ListProps, [], Slots> = (p: ListProps, { slots }) => {
  return (
    <li class={cn(styles.listItem, p.class)} style={p.style}>
      {slots.default?.()}
    </li>
  );
};
